// JavaScript Document
/**
*@description : 图片工具类
*@date : 2013-10-29
*@author : WangTao
*@version : 3.0
**/
$(function(){
		   
	var constants = {
		CANVAS_ID : 'mainBoard',
		ORIG_IMAGE_DATA : null,
		filters : [{id:'ps_0',filterStyle : ''},
				   {id:'ps_1',filterStyle : 'grayscale'},
				   {id:'ps_2',filterStyle : 'sepia'},
				   {id:'ps_3',filterStyle : 'invert'},
				   {id:'ps_4',filterStyle : 'opacity'},
				   {id:'ps_5',filterStyle : 'brightness'},
				   {id:'ps_6',filterStyle : 'contrast'},
				   {id:'ps_7',filterStyle : 'blur'},
				   {id:'ps_8',filterStyle : 'saturate'}
				   ]
	}
	
	init();
	
	function init(){
		
		//鼠标点击滤镜图标，给画布设置图标上的默认滤镜样式
		var filters = constants.filters;
		for(var i=0,j=filters.length;i<j;i++){
			$('#'+filters[i].id).bind('click', function(e) {
				var filterStyle = this.style['-webkit-filter'];
				var _grayscale = function(val){
					$('#mainBoard').css("-webkit-filter",filterStyle);
				}
				_grayscale();		
				$("#psBtns").fadeOut();
			});
		}
		/*
		$('#history').lake({
			'speed': 1,
			'scale': 0.5,
			'waves': 10
		});
		*/
	}
	//缓存原图
	function saveOrigImage(index){
		constants.ORIG_IMAGE_DATA = canvas.toDataURL();
	}
		//滤镜处理事件
	$('#psBtn').bind('click', function(e) {
			e = e||window.event;
			if($("#psBtns").is(":hidden")){
				var top =  e.clientY;
				var left =e.clientX;
				$("#psBtns")[0].style.left =left-15+'px'; 
				$("#psBtns")[0].style.top = top+ 10   + "px";
				$("#psBtns").fadeIn();
			}else{
				$("#psBtns").fadeOut();
			}
	}); 

	//灰度
	$('#r1').bind('change', function(e) {
			$('#mainBoard').css("-webkit-filter",'grayscale('+ e.currentTarget.value+')');
			$('#s1').html(Math.floor(e.currentTarget.value*100)+'%');
	}); 
	
	//怀旧(褐色)
	$('#r2').bind('change', function(e) {
			$('#mainBoard').css("-webkit-filter",'sepia('+e.currentTarget.value+')');
			$('#s2').html(Math.floor(e.currentTarget.value*100)+'%');
	}); 
	
	//反色
	$('#r3').bind('change', function(e) {
			$('#mainBoard').css("-webkit-filter",'invert('+e.currentTarget.value+')');
			$('#s3').html(Math.floor(e.currentTarget.value*100)+'%');
	}); 
	//透明度
	$('#r4').bind('change', function(e) {
			$('#mainBoard').css("-webkit-filter",'opacity('+e.currentTarget.value+')');
			$('#s4').html(Math.floor(e.currentTarget.value*100)+'%');
	}); 
	//亮度
	$('#r5').bind('change', function(e) {
			$('#mainBoard').css("-webkit-filter",'brightness('+e.currentTarget.value+')');
			$('#s5').html(Math.floor(e.currentTarget.value*50)+'%');
	}); 
	//对比度
	$('#r6').bind('change', function(e) {
			$('#mainBoard').css("-webkit-filter",'contrast('+e.currentTarget.value+')');
			$('#s6').html(Math.floor(e.currentTarget.value*100)+'%');
	}); 
	
	//清晰度
	$('#r7').bind('change', function(e) {
			$('#mainBoard').css("-webkit-filter",'blur('+e.currentTarget.value+'px)');
			$('#s7').html(Math.floor(e.currentTarget.value*10)+'%');
	}); 
	//饱和度
	$('#r8').bind('change', function(e) {
			$('#mainBoard').css("-webkit-filter",'saturate('+e.currentTarget.value+')');
			$('#s8').html(Math.floor(e.currentTarget.value*10)+'%');
	}); 
	
	/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	///															图片处理													///
			1.  反色：获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g, 255-b)
		
			2.  灰色调：获取一个像素点RGB值r, g, b则新的RGB值为
			
					newr = (r * 0.272) + (g * 0.534) + (b * 0.131);
			
					newg = (r * 0.349) + (g * 0.686) + (b * 0.168);
			
					newb = (r * 0.393) + (g * 0.769) + (b * 0.189);
			
			3.   模糊：基于一个5*5的卷积核
			
			4.   浮雕与雕刻：
			
				 基于当前像素的前一个像素RGB值与它的后一个像素的RGB值之差再加上128
			
			5.   镜像：模拟了物体在镜子中与之对应的效果。
	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
	
	//图片处理显示事件
	$('#filterBtn').bind('click', function(e) {
			e = e||window.event;
			if($("#filters").is(":hidden")){
				var top =  e.clientY;
				var left =e.clientX;
				$("#filters")[0].style.left =left-15+'px'; 
				$("#filters")[0].style.top = top+ 10   + "px";
				$("#filters").fadeIn();
			}else{
				$("#filters").fadeOut();
			}
	});
	
	//处理黑白，灰度图
	$('#filter1').bind('click', function(e) { 
			var len = canvas.width * canvas.height * 4;  
    		var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);  
       		var binaryData = canvasData.data;  
      		 // Processing all the pixels  
       		gfilter.colorAdjustProcess(binaryData, len);  
       		// Copying back canvas data to canvas  
      		 ctx.putImageData(canvasData, 0, 0);
			Cache.saveImageToCache();
			$("#filters").fadeOut();
	});
	
	//处理反色
	$('#filter2').bind('click', function(e) {
			Cache.saveImageToCache();
			var len = canvas.width * canvas.height * 4; 
		 	var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);  
			var binaryData = canvasData.data;  
       		gfilter.colorInvertProcess(binaryData, len);  
  			 // Copying back canvas data to canvas  
       		ctx.putImageData(canvasData, 0, 0);  
			$("#filters").fadeOut();
	});
	//处理素描
	$('#filter3').bind('click', function(e) {
			Cache.saveImageToCache();
			var st = Math.abs(5);
			var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
			sk.sketch(imgData, st);
			ctx.putImageData(imgData, 0, 0); 
			$("#filters").fadeOut();
	});
	
	//朦胧，处理清晰度
	$('#filter4').bind('click', function(e) { 
		   Cache.saveImageToCache();
   		   var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);  
		   // Processing all the pixels  
		   gfilter.blurProcess(ctx, canvasData);  
		   // Copying back canvas data to canvas  
      	   ctx.putImageData(canvasData, 0, 0); 
			$("#filters").fadeOut();
	});
	
	//处理浮雕效果 
	$('#filter5').bind('click', function(e) {
	       	Cache.saveImageToCache();
			var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);  
		   // Processing all the pixels  
		   gfilter.reliefProcess(ctx, canvasData);  
		     //gfilter.diaokeProcess(ctx, canvasData);   
		   // Copying back canvas data to canvas  
      	   ctx.putImageData(canvasData, 0, 0); 
			$("#filters").fadeOut();
	});
	
	//处理镜像
	$('#filter6').bind('click', function(e) {
			Cache.saveImageToCache();
		    var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);  
		   // Processing all the pixels  
		   gfilter.mirrorProcess(ctx, canvasData);  
		   // Copying back canvas data to canvas  
      	   ctx.putImageData(canvasData, 0, 0); 
			$("#filters").fadeOut();
	});
	

				
				
});
		  
